<template>
  <view>
    <headerss title='全部订单'></headerss>
    <view class="">
      <u-tabs :list="list" :current="current" @change="change"></u-tabs>
    </view>

    <!-- 店铺列表 -->
    <view class="shop_list">
      <view class="shop">
        <view class="shop_top">
          <image src="../../static/img/gy.png" mode=""></image>
          <text>升光官方店铺</text>
        </view>

        <view class="shop_bottom">
          <view class="shop_ddh">
            <view>订单号: 2313132132134345435</view>
            <text>待付款</text>
          </view>

          <view class="shop_introduce">
            <image src="../../static/img/tx.jpg" mode=""></image>
            <view class="shop_title">
              <view>原神温迪神之眼周边蒙德项链手链挂饰铜镀18K金</view>
              <text>温迪风神之眼</text>
            </view>
          </view>
          <!-- 待付款 -->
          <view class="">
            <view class="shop_price">
              <text>剩余付款时间：15:00:00</text>
              <view>实付款：￥100</text>
              </view>
            </view>

            <view class="shop_zhifu">
              <button class="quxiao">取消支付</button>
              <button>立即支付</button>
            </view>
          </view>


        </view>
      </view>
    </view>
    <!-- 代发货 -->
    <view class="shop_list1">
      <view class="shop">

        <view class="shop_top">
          <image src="../../static/img/gy.png" mode=""></image>
          <text>升光官方店铺</text>
        </view>

        <view class="shop_bottom">
          <view class="shop_ddh">
            <view>订单号：704019285091972105</view>
            <text style="color: #999;">待发货</text>
          </view>

          <view class="shop_introduce">
            <image src="../../static/img/tx.jpg" mode=""></image>
            <view class="shop_title">
              <view>原神温迪神之眼周边蒙德项链手链挂饰铜镀18K金</view>
              <text>温迪风神之眼</text>
            </view>
          </view>
          <view class="">
            <view class="remark">
              <text style="width: 78rpx;">备注：</text>
              <text style="line-height: 36rpx;">我要一个蒙德城风神温迪的神之眼，千万不要发错了，谢谢</text>
            </view>
          </view>

          <view class="price">实付款：￥100</view>

          <!-- 代发货 -->
          <view style="text-align: right;">
            <button class="">订单详情</button>
          </view>
          <!-- 已发货 -->
          <!-- <view class="deliver" style="text-align: right;">
            <button class="deliver_button">查看物流</button>
            <button>确认收货</button>
          </view> -->
          <!-- 已完成 -->
          <!-- <view class="complete">
            <button class="complete_button">发起售后</button>
            <button>查看订单</button>
          </view> -->

        </view>
      </view>
    </view>
  </view>

</template>
</template>
<script>
  export default {
    data() {
      return {
        flag: 1,
        list: [{
          name: '全部订单'
        }, {
          name: '代付款'
        }, {
          name: '待发货',
        }, {
          name: '待收货',
        }, {
          name: '已完成',
        }, {
          name: '售后服务',
        }],
        current: 0
      }
    },
    methods: {
      change(index) {
        this.current = index;
      }
    }
  }
</script>

<style scoped lang="scss">
  /* 店铺列表 */
  .shop_list {
    margin: 20rpx 32rpx;
  }

  .shop {
    width: 686rpx;
    height: 480rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 30rpx;

    .shop_top {
      border-bottom: 2rpx solid #EEEEEE;
      padding-bottom: 34rpx;

      image {
        width: 36rpx;
        height: 36rpx;
        // vertical-align: middle;
      }

      text {
        margin-left: 20rpx;
        width: 192rpx;
        height: 32rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
        line-height: 32rpx;
      }
    }

    .shop_bottom {
      .shop_ddh {
        display: flex;
        justify-content: space-between;
        margin: 30rpx 0;
        // width: 356rpx;
        height: 24rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
        line-height: 24rpx;

        text {
          color: #E92B2B;
          display: inline-block;
        }
      }

      .shop_introduce {
        display: flex;
        margin-bottom: 22rpx;

        image {
          margin-right: 20rpx;
          width: 160rpx;
          height: 140rpx;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }

        .shop_title {
          view {
            margin-bottom: 30rpx;
            // width: 466rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #000000;
            line-height: 40rpx;
          }

          text {
            font-size: 24rpx;
            font-weight: 500;
            color: #999999;
          }
        }
      }

      // 代付款
      .shop_price {
        display: flex;
        justify-content: space-between;

        text {
          width: 268rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #E92B2B;
        }

        view {
          width: 192rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
        }
      }

      .shop_zhifu {
        text-align: right;
        margin-top: 20rpx;

        button {
          display: inline-block;
          width: 145rpx;
          height: 56rpx;
          line-height: 51rpx;
          border-radius: 28rpx 28rpx 28rpx 28rpx;
          border: 2rpx solid #3369FF;

          font-size: 23rpx;
          font-weight: 500;
          color: #3369FF;
        }

        .quxiao {
          margin-right: 30rpx;
          color: #999999;
          border: 2rpx solid #999999;
        }
      }
    }
  }

  // 代发货
  .shop_list1 {
    margin: 20rpx 32rpx;

    .shop {
      width: 686rpx;
      height: 556rpx;
    }

    .price {
      text-align: right;
      padding: 20rpx 0 30rpx;
      height: 24rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 28rpx;
    }

    button {
      margin-top: 20rpx;
      display: inline-block;
      width: 150rpx;
      height: 56rpx;
      line-height: 52rpx;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      border: 2rpx solid #3369FF;


      font-size: 24rpx;
      font-weight: 500;
      color: #3369FF;
    }

    // 已发货
    .deliver {
      text-align: right;

      button {
        width: 150rpx;
        height: 56rpx;
        line-height: 52rpx;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        border: 2rpx solid #000000;

        font-size: 24rpx;
        font-weight: 500;
        color: #000000;
      }

      .deliver_button {
        margin-right: 30rpx;
        color: #999999;
        border: 2rpx solid #999999;
      }
    }

    // 已完成
    .complete {
      text-align: right;

      button {
        width: 150rpx;
        height: 56rpx;
        line-height: 52rpx;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        border: 2rpx solid #000000;

        font-size: 24rpx;
        font-weight: 500;
        color: #000000;
      }

      .complete_button {
        margin-right: 30rpx;
        color: #999999;
        border: 2rpx solid #999999;
      }
    }
  }

  .remark {
    font-size: 24rpx;
    display: flex;
  }

  // 已发货
</style>